<template>
  <div class="erp-container">
    <aside class="sidebar">
      <div
        v-for="m in menus"
        :key="m.key"
        class="menu-item"
        :class="{ active: activeMenu === m.key }"
        @click="activeMenu = m.key"
      >
        {{ m.label }}
      </div>
    </aside>

    <main class="content">
      <!-- 商品 -->
      <section v-if="activeMenu === 'product'" class="section">
        <header class="section-header">
          <h2>商品</h2>
        </header>
        <div class="form-grid">
          <label>
            名称
            <input v-model="productForm.name" placeholder="商品名称" />
          </label>
          <label>
            品牌
            <input v-model="productForm.brand" placeholder="品牌" />
          </label>
          <label>
            条码
            <input v-model="productForm.barcode" placeholder="barcode" />
          </label>
          <label>
            单位
            <input v-model="productForm.unit" placeholder="单位" />
          </label>
          <label>
            规格
            <input v-model="productForm.spec" placeholder="规格" />
          </label>
          <label>
            SPU
            <input v-model="productForm.spuCode" placeholder="spuCode" />
          </label>
          <label>
            SKU
            <input v-model="productForm.skuCode" placeholder="skuCode" />
          </label>
          <label>
            价格
            <input v-model.number="productForm.price" type="number" step="0.01" />
          </label>
          <label>
            会员价
            <input v-model.number="productForm.memberPrice" type="number" step="0.01" />
          </label>
          <label>
            税率
            <input v-model.number="productForm.taxRate" type="number" step="0.01" />
          </label>
          <label class="inline">
            称重
            <input v-model="productForm.weighted" type="checkbox" />
          </label>
          <label class="inline">
            启用
            <input v-model="productForm.enabled" type="checkbox" />
          </label>
          <div class="form-actions">
            <button @click="submitProduct">{{ productForm.id ? '修改商品' : '新增商品' }}</button>
            <button class="secondary" @click="resetProductForm">重置</button>
            <button @click="fetchProducts">刷新</button>
          </div>
        </div>

        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>名称</th>
                <th>品牌</th>
                <th>SKU</th>
                <th>条码</th>
                <th>单位</th>
                <th>规格</th>
                <th>价格</th>
                <th>会员价</th>
                <th>税率</th>
                <th>启用</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="it in productList" :key="it.id">
                <td>{{ it.id }}</td>
                <td>{{ it.name }}</td>
                <td>{{ it.brand }}</td>
                <td>{{ it.skuCode }}</td>
                <td>{{ it.barcode }}</td>
                <td>{{ it.unit }}</td>
                <td>{{ it.spec }}</td>
                <td>{{ it.price }}</td>
                <td>{{ it.memberPrice }}</td>
                <td>{{ it.taxRate }}</td>
                <td>{{ it.enabled ? '是' : '否' }}</td>
                <td class="actions">
                  <button @click="editProduct(it)">编辑</button>
                  <button class="danger" @click="removeProduct(it.id)">删除</button>
                </td>
              </tr>
              <tr v-if="!productList.length">
                <td colspan="12" class="empty">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- 供应商 -->
      <section v-if="activeMenu === 'vendor'" class="section">
        <header class="section-header">
          <h2>供应商</h2>
        </header>
        <div class="form-grid">
          <label>
            名称
            <input v-model="vendorForm.name" placeholder="供应商名称" />
          </label>
          <label>
            编码
            <input v-model="vendorForm.code" placeholder="code" />
          </label>
          <label>
            联系人
            <input v-model="vendorForm.contact" placeholder="联系人" />
          </label>
          <label>
            结算周期
            <input v-model="vendorForm.settleCycle" placeholder="结算周期" />
          </label>
          <label>
            税号
            <input v-model="vendorForm.taxNo" placeholder="税号" />
          </label>
          <label>
            地址
            <input v-model="vendorForm.address" placeholder="地址" />
          </label>
          <label class="span-2">
            条款
            <input v-model="vendorForm.terms" placeholder="条款" />
          </label>
          <div class="form-actions">
            <button @click="submitVendor">{{ vendorForm.id ? '修改供应商' : '新增供应商' }}</button>
            <button class="secondary" @click="resetVendorForm">重置</button>
             <button @click="fetchVendors">刷新</button>
          </div>
        </div>

        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>编码</th>
                <th>名称</th>
                <th>联系人</th>
                <th>结算周期</th>
                <th>税号</th>
                <th>地址</th>
                <th>条款</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="it in vendorList" :key="it.id">
                <td>{{ it.id }}</td>
                <td>{{ it.code }}</td>
                <td>{{ it.name }}</td>
                <td>{{ it.contact }}</td>
                <td>{{ it.settleCycle }}</td>
                <td>{{ it.taxNo }}</td>
                <td>{{ it.address }}</td>
                <td>{{ it.terms }}</td>
                <td class="actions">
                  <button @click="editVendor(it)">编辑</button>
                  <button class="danger" @click="removeVendor(it.id)">删除</button>
                </td>
              </tr>
              <tr v-if="!vendorList.length">
                <td colspan="9" class="empty">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- 库存查询 -->
      <section v-if="activeMenu === 'inventory'" class="section">
        <header class="section-header">
          <h2>库存查询（按SKU）</h2>
        </header>
        <div class="form-inline">
          <label>
            skuId
            <input v-model="inventorySkuId" placeholder="如：4" />
          </label>
          <button @click="fetchInventory">查询</button>
          <button class="secondary" @click="fetchInventory">刷新</button>
        </div>

        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>id</th>
                <th>userName</th>
                <th>loginStatus</th>
                <th>createTime</th>
                <th>updateTime</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="it in inventoryList" :key="it.id">
                <td>{{ it.id }}</td>
                <td>{{ it.userName }}</td>
                <td>{{ it.loginStatus }}</td>
                <td>{{ it.createTime }}</td>
                <td>{{ it.updateTime }}</td>
              </tr>
              <tr v-if="!inventoryList.length">
                <td colspan="5" class="empty">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- 采购订单 -->
      <section v-if="activeMenu === 'purchaseOrder'" class="section">
        <header class="section-header">
          <h2>采购订单</h2>
        </header>

        <div class="form-grid">
          <label>
            单号
            <input v-model="poForm.poNo" placeholder="poNo" />
          </label>
          <label>
            供应商ID
            <input v-model.number="poForm.vendorId" type="number" placeholder="vendorId" />
          </label>
          <label>
            状态
            <input v-model="poForm.status" placeholder="状态" />
          </label>
          <label>
            税率
            <input v-model.number="poForm.taxRate" type="number" step="0.01" />
          </label>
          <label>
            折扣
            <input v-model.number="poForm.discount" type="number" step="0.01" />
          </label>
          <label>
            运费
            <input v-model.number="poForm.freight" type="number" step="0.01" />
          </label>
          <label>
            ETA
            <input v-model="poForm.eta" placeholder="2025-10-10 06:21:43" />
          </label>
          <label>
            创建时间
            <input v-model="poForm.createdAt" placeholder="2025-10-10 06:21:43" />
          </label>
          <label>
            审批时间
            <input v-model="poForm.approvedAt" placeholder="可为空" />
          </label>
          <div class="form-actions">
            <button @click="submitPo">创建采购订单</button>
            <button class="secondary" @click="resetPoForm">重置</button>
            <button @click="fetchPurchaseOrders">刷新</button>
          </div>
        </div>

        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>单号</th>
                <th>供应商ID</th>
                <th>状态</th>
                <th>税率</th>
                <th>折扣</th>
                <th>运费</th>
                <th>ETA</th>
                <th>创建时间</th>
                <th>审批时间</th>
                <th>明细</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="it in poList" :key="it.id">
                <td>{{ it.id }}</td>
                <td>{{ it.poNo }}</td>
                <td>{{ it.vendorId }}</td>
                <td>{{ it.status }}</td>
                <td>{{ it.taxRate }}</td>
                <td>{{ it.discount }}</td>
                <td>{{ it.freight }}</td>
                <td>{{ it.eta }}</td>
                <td>{{ it.createdAt }}</td>
                <td>{{ it.approvedAt }}</td>
                <td class="actions">
                  <button @click="openPoItems(it)">明细</button>
                </td>
              </tr>
              <tr v-if="!poList.length">
                <td colspan="11" class="empty">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 采购订单明细弹窗 -->
        <div v-if="poItemsModal.visible" class="modal-backdrop" @click.self="closePoItems">
          <div class="modal">
            <header class="modal-header">
              <h3>采购订单明细 - PO: {{ poItemsModal.po?.poNo }} (ID: {{ poItemsModal.po?.id }})</h3>
              <button class="icon" @click="closePoItems">×</button>
            </header>

            <div class="table-wrap small">
              <table>
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>SKU</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>税率</th>
                    <th>批次</th>
                    <th>有效期</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="it in poItemsModal.po?.items || []" :key="it.id">
                    <td>{{ it.id }}</td>
                    <td>{{ it.skuId }}</td>
                    <td>{{ it.qty }}</td>
                    <td>{{ it.price }}</td>
                    <td>{{ it.taxRate }}</td>
                    <td>{{ it.batchNo }}</td>
                    <td>{{ it.expireDate }}</td>
                  </tr>
                  <tr v-if="!(poItemsModal.po?.items || []).length">
                    <td colspan="7" class="empty">暂无明细</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="form-grid">
              <label>
                skuId
                <input v-model.number="poItemForm.skuId" type="number" />
              </label>
              <label>
                数量
                <input v-model.number="poItemForm.qty" type="number" />
              </label>
              <label>
                单价
                <input v-model.number="poItemForm.price" type="number" step="0.01" />
              </label>
              <label>
                税率
                <input v-model.number="poItemForm.taxRate" type="number" step="0.01" />
              </label>
              <label>
                批次号
                <input v-model="poItemForm.batchNo" />
              </label>
              <label>
                有效期
                <input v-model="poItemForm.expireDate" placeholder="YYYY-MM-DD 或 含时间" />
              </label>
              <div class="form-actions">
                <button @click="addPoItem">新增明细</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 销售订单 -->
      <section v-if="activeMenu === 'salesOrder'" class="section">
        <header class="section-header">
          <h2>销售订单</h2>
        </header>
        <div class="form-grid">
          <label>
            销售单号
            <input v-model="soForm.soNo" />
          </label>
          <label>
            客户ID
            <input v-model.number="soForm.customerId" type="number" />
          </label>
          <label>
            状态
            <input v-model="soForm.status" />
          </label>
          <label>
            创建时间
            <input v-model="soForm.createdAt" placeholder="2025-10-10 07:16:09" />
          </label>
          <div class="form-actions">
            <button @click="submitSo">创建销售订单</button>
            <button class="secondary" @click="resetSoForm">重置</button>
            <button @click="fetchSalesOrders">查询</button>
          </div>
        </div>

        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>销售单号</th>
                <th>客户ID</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>明细</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="it in soList" :key="it.id">
                <td>{{ it.id }}</td>
                <td>{{ it.soNo }}</td>
                <td>{{ it.customerId }}</td>
                <td>{{ it.status }}</td>
                <td>{{ it.createdAt }}</td>
                <td class="actions">
                  <button @click="openSoItems(it)">明细</button>
                </td>
              </tr>
              <tr v-if="!soList.length">
                <td colspan="6" class="empty">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 销售订单明细弹窗 -->
        <div v-if="soItemsModal.visible" class="modal-backdrop" @click.self="closeSoItems">
          <div class="modal">
            <header class="modal-header">
              <h3>销售订单明细 - SO: {{ soItemsModal.so?.soNo }} (ID: {{ soItemsModal.so?.id }})</h3>
              <button class="icon" @click="closeSoItems">×</button>
            </header>

            <div class="table-wrap small">
              <table>
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>SKU</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>税率</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="it in soItemsModal.so?.items || []" :key="it.id">
                    <td>{{ it.id }}</td>
                    <td>{{ it.skuId }}</td>
                    <td>{{ it.qty }}</td>
                    <td>{{ it.price }}</td>
                    <td>{{ it.taxRate }}</td>
                  </tr>
                  <tr v-if="!(soItemsModal.so?.items || []).length">
                    <td colspan="5" class="empty">暂无明细</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="form-grid">
              <label>
                soId
                <input v-model.number="soItemForm.soId" type="number" />
              </label>
              <label>
                skuId
                <input v-model.number="soItemForm.skuId" type="number" />
              </label>
              <label>
                数量
                <input v-model.number="soItemForm.qty" type="number" />
              </label>
              <label>
                单价
                <input v-model.number="soItemForm.price" type="number" step="0.01" />
              </label>
              <label>
                税率
                <input v-model.number="soItemForm.taxRate" type="number" step="0.01" />
              </label>
              <div class="form-actions">
                <button @click="addSoItem">新增明细</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import {
  listProducts,
  createProduct,
  updateProduct,
  deleteProduct,
  type ProductPayload,
} from '@/api/erp/product'
import { listVendors, createVendor, updateVendor, deleteVendor, type VendorPayload } from '@/api/erp/vendor'
import { queryInventoryBySku, type InventoryQueryParams } from '@/api/erp/inventory'
import {
  listPurchaseOrders,
  createPurchaseOrder,
  addPurchaseOrderItems,
  type PurchaseOrderPayload,
  type PurchaseOrderItem,
} from '@/api/erp/purchaseOrder'
import {
  listSalesOrders,
  createSalesOrder,
  addSalesOrderItems,
  type SalesOrderPayload,
  type SalesOrderItem,
} from '@/api/erp/salesOrder'

type MenuKey = 'product' | 'vendor' | 'inventory' | 'purchaseOrder' | 'salesOrder'
const menus = [
  { key: 'product', label: '商品' },
  { key: 'vendor', label: '供应商' },
  { key: 'inventory', label: '库存查询' },
  { key: 'purchaseOrder', label: '采购订单' },
  { key: 'salesOrder', label: '销售订单' },
] as { key: MenuKey; label: string }[]

const activeMenu = ref<MenuKey>('product')

// 商品
const productList = ref<any[]>([])
const productForm = reactive<ProductPayload>({
  id: undefined,
  barcode: '',
  brand: '',
  enabled: true,
  memberPrice: 0,
  name: '',
  price: 0,
  skuCode: '',
  spec: '',
  spuCode: '',
  taxRate: 0,
  unit: '',
  weighted: false,
})
function resetProductForm() {
  Object.assign(productForm, {
    id: undefined,
    barcode: '',
    brand: '',
    enabled: true,
    memberPrice: 0,
    name: '',
    price: 0,
    skuCode: '',
    spec: '',
    spuCode: '',
    taxRate: 0,
    unit: '',
    weighted: false,
  })
}
async function fetchProducts() {
  const res = await listProducts()
  productList.value = res?.data?.data || []
}
function editProduct(it: any) {
  Object.assign(productForm, it)
}
async function submitProduct() {
  const payload = { ...productForm }
  if (!payload.name) return alert('请填写商品名称')
  const api = payload.id ? updateProduct : createProduct
  const res = await api(payload)
  if (res?.data?.code === 0) {
    alert('成功')
    resetProductForm()
    fetchProducts()
  } else {
    alert('失败')
  }
}
async function removeProduct(id: number | string) {
  if (!confirm('确认删除该商品？')) return
  const res = await deleteProduct(id)
  if (res?.data?.code === 0) {
    alert('删除成功')
    fetchProducts()
  } else {
    alert('删除失败')
  }
}

// 供应商
const vendorList = ref<any[]>([])
const vendorForm = reactive<VendorPayload>({
  id: undefined,
  address: '',
  code: '',
  contact: '',
  name: '',
  settleCycle: '',
  taxNo: '',
  terms: '',
})
function resetVendorForm() {
  Object.assign(vendorForm, {
    id: undefined,
    address: '',
    code: '',
    contact: '',
    name: '',
    settleCycle: '',
    taxNo: '',
    terms: '',
  })
}
async function fetchVendors() {
  const res = await listVendors()
  vendorList.value = res?.data?.data || []
}
function editVendor(it: any) {
  Object.assign(vendorForm, it)
}
async function submitVendor() {
  const payload = { ...vendorForm }
  if (!payload.name) return alert('请填写供应商名称')
  const api = payload.id ? updateVendor : createVendor
  const res = await api(payload)
  if (res?.data?.code === 0) {
    alert('成功')
    resetVendorForm()
    fetchVendors()
  } else {
    alert('失败')
  }
}
async function removeVendor(id: number | string) {
  if (!confirm('确认删除该供应商？')) return
  const res = await deleteVendor(id)
  if (res?.data?.code === 0) {
    alert('删除成功')
    fetchVendors()
  } else {
    alert('删除失败')
  }
}

// 库存查询
const inventorySkuId = ref<string>('4')
const inventoryList = ref<any[]>([])
async function fetchInventory() {
  const params: InventoryQueryParams = { skuId: inventorySkuId.value }
  const res = await queryInventoryBySku(params)
  inventoryList.value = res?.data?.data || []
}

// 采购订单
const poList = ref<any[]>([])
const poForm = reactive<PurchaseOrderPayload>({
  approvedAt: '',
  createdAt: '',
  discount: 0,
  eta: '',
  freight: 0,
  poNo: '',
  status: '',
  taxRate: 0,
  vendorId: 0,
})
function resetPoForm() {
  Object.assign(poForm, {
    approvedAt: '',
    createdAt: '',
    discount: 0,
    eta: '',
    freight: 0,
    poNo: '',
    status: '',
    taxRate: 0,
    vendorId: 0,
  })
}
async function fetchPurchaseOrders() {
  const res = await listPurchaseOrders()
  poList.value = res?.data?.data || []
}
async function submitPo() {
  const payload = { ...poForm }
  if (!payload.poNo) return alert('请填写采购单号')
  const res = await createPurchaseOrder(payload)
  if (res?.data?.code === 0) {
    alert('创建成功')
    resetPoForm()
    fetchPurchaseOrders()
  } else {
    alert('创建失败')
  }
}
const poItemsModal = reactive<{ visible: boolean; po: any | null }>({ visible: false, po: null })
const poItemForm = reactive<PurchaseOrderItem>({
  batchNo: '',
  expireDate: '',
  poId: 0,
  price: 0,
  qty: 0,
  skuId: 0,
  taxRate: 0,
})
function openPoItems(po: any) {
  poItemsModal.visible = true
  poItemsModal.po = po
  poItemForm.poId = po.id
}
function closePoItems() {
  poItemsModal.visible = false
  poItemsModal.po = null
  Object.assign(poItemForm, {
    batchNo: '',
    expireDate: '',
    poId: 0,
    price: 0,
    qty: 0,
    skuId: 0,
    taxRate: 0,
  })
}
async function addPoItem() {
  if (!poItemsModal.po?.id) return alert('缺少采购订单ID')
  const poId = poItemsModal.po.id
  const item: PurchaseOrderItem = { ...poItemForm, poId }
  const res = await addPurchaseOrderItems(poId, [item])
  if (res?.data?.code === 0) {
    alert('添加成功')
    // 更新当前 PO 的 items 列表（重新拉取或直接 push）
    await fetchPurchaseOrders()
    // 同步更新弹窗中的数据
    const fresh = poList.value.find((x) => x.id === poId)
    poItemsModal.po = fresh || poItemsModal.po
    // 清空输入
    Object.assign(poItemForm, { batchNo: '', expireDate: '', price: 0, qty: 0, skuId: 0, taxRate: 0, poId })
  } else {
    alert('添加失败')
  }
}

// 销售订单
const soList = ref<any[]>([])
const soQuery = reactive<{ soNo: string }>({ soNo: 'sel4567897' })
const soForm = reactive<SalesOrderPayload>({
  createdAt: '',
  customerId: 0,
  soNo: '',
  status: '',
})
function resetSoForm() {
  Object.assign(soForm, { createdAt: '', customerId: 0, soNo: '', status: '' })
}
async function fetchSalesOrders() {

  let resquest = null
  if (soForm.soNo) {
    resquest = { soNo: soForm.soNo }
  }
  const res = await listSalesOrders(resquest)
  soList.value = res?.data?.data || []
}
async function submitSo() {
  const payload = { ...soForm }
  if (!payload.soNo) return alert('请填写销售单号')
  const res = await createSalesOrder(payload)
  if (res?.data?.code === 0) {
    alert('创建成功')
    resetSoForm()
    // 便于查看，使用刚创建的单号查询
    soQuery.soNo = payload.soNo
    fetchSalesOrders()
  } else {
    alert('创建失败')
  }
}
const soItemsModal = reactive<{ visible: boolean; so: any | null }>({ visible: false, so: null })
const soItemForm = reactive<SalesOrderItem>({
  price: 0,
  qty: 0,
  skuId: 0,
  soId: 0,
  taxRate: 0,
})
function openSoItems(so: any) {
  soItemsModal.visible = true
  soItemsModal.so = so
  soItemForm.soId = so.id
}
function closeSoItems() {
  soItemsModal.visible = false
  soItemsModal.so = null
  Object.assign(soItemForm, { price: 0, qty: 0, skuId: 0, soId: 0, taxRate: 0 })
}
async function addSoItem() {
  if (!soItemsModal.so?.id) return alert('缺少销售订单ID')
  const soId = soItemsModal.so.id
  const item: SalesOrderItem = { ...soItemForm, soId }
  const res = await addSalesOrderItems(soId, [item])
  if (res?.data?.code === 0) {
    alert('添加成功')
    await fetchSalesOrders()
    const fresh = soList.value.find((x) => x.id === soId)
    soItemsModal.so = fresh || soItemsModal.so
    Object.assign(soItemForm, { price: 0, qty: 0, skuId: 0, soId, taxRate: 0 })
  } else {
    alert('添加失败')
  }
}

onMounted(async () => {
  // 默认加载商品与供应商列表
  await Promise.all([fetchProducts(), fetchVendors()])
  // 预加载采购/销售（可选）
  fetchPurchaseOrders()
})
</script>

<style scoped>
.erp-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: calc(100vh - 80px);
  background: #f7f7f9;
}
.sidebar {
  background: #fff;
  border-right: 1px solid #e5e7eb;
  padding: 12px 8px;
}
.menu-item {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 4px 0;
  cursor: pointer;
  color: #374151;
}
.menu-item:hover { background: #f3f4f6; }
.menu-item.active {
  background: #2563eb;
  color: #fff;
}

.content {
  padding: 16px;
}

.section { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-header h2 { margin: 0; font-size: 18px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.form-grid .span-2 { grid-column: span 2; }
.form-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
label { display: flex; flex-direction: column; font-size: 12px; color: #6b7280; }
label.inline { flex-direction: row; align-items: center; gap: 8px; }
input {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
}
input:focus { border-color: #2563eb; }

.form-actions { display: flex; gap: 8px; align-items: center; }
button {
  padding: 8px 12px;
  border: none;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
button.secondary { background: #6b7280; }
button.danger { background: #dc2626; }
button.icon { background: transparent; color: #111827; font-size: 20px; }

.table-wrap { overflow: auto; border: 1px solid #e5e7eb; border-radius: 12px; }
.table-wrap.small { max-height: 40vh; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { background: #f9fafb; }
th, td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; text-align: left; white-space: nowrap; }
td.actions { display: flex; gap: 8px; }
.empty { text-align: center; color: #9ca3af; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: min(900px, 92vw);
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 16px;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
</style>